<template>
  <div v-loading="loading">
    <div class="wlm-table">
      <div
        class="wlm-table"
        style="width:100%;"
        :style="{background:fiststyle==true?'#87D593':'#F56C6C'}"
      >
        <div style="display:flex;align-items:center">
          <div>
            <i
              class="el-icon-warning"
              v-if="fiststyle==false"
              style="font-size:50px;margin-right:10px;color: #fff;"
            ></i>
            <i
              class="el-icon-success"
              v-if="fiststyle==true"
              style="font-size:26px;margin-right:10px;color: #fff;"
            ></i>
          </div>
          <div>
            <span
              v-if="fiststyle==false"
              style="color:#ffffff;"
            >
              <p style="color:#fff;">请您立即配置计划任务！否则将造成无法估计的后果！</p>
            </span>
            <span v-else>
              <div style="color:#fff;">计划任务已配置成功！</div>
            </span>
          </div>
        </div>
      </div>
    </div>

    <div
      class="wlm-table"
      style="margin-top:20px;"
    >
      <div style="display:flex;">
        <div style="font-size:20px;margin-right:20px;">计划任务URL：{{url}}</div>
        <el-button
          type="primary"
          plain
          @click="handleClipboard(url,$event)"
        >点击复制</el-button>
      </div>
    </div>
    <div
      class="wlm-table"
      style="margin-top:20px;"
    >
      <div style="display:flex;">
        <div style="font-size:20px;margin-right:20px;">计划任务状态：
          <el-tag
            type="success"
            v-if="zt.length==0"
          >正常运行</el-tag>
          <el-tag
            type="danger"
            v-else
          >异常</el-tag>
        </div>
        <el-button
          type="primary"
          plain
          v-if="zt.length!=0"
          @click="abnormalbtn"
        >查看异常</el-button>
      </div>
    </div>
    <div
      class="wlm-table"
      style="margin-top:20px;"
    >
      <div>
        <div style="margin-top:20px;font-size:20px;"> 教程：</div>
        <img
          style="width:100%;"
          src="../../assets/custorm_style/456.png"
          alt=""
        >
      </div>
    </div>

    <div
      class="wlm-table"
      style="margin-top:20px;"
    >
      <div style="margin-top:20px;">
        <div style="margin-top:20px;font-size:20px;"> 执行日志：</div>
        <p v-html="journal"></p>
      </div>
    </div>
    <el-dialog
      title="查看异常"
      :visible.sync="dialogVisible"
      width="70%"
    >
      <el-table
        :data="abnormaldata"
       
      >
        <el-table-column label="时间">
          <template slot-scope="scope">
            {{scope.row.time}}
          </template>
        </el-table-column>
        <el-table-column label="内容">
          <template slot-scope="scope">
            {{scope.row.content}}
          </template>
        </el-table-column>

      </el-table>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="danger"
          @click="dialogVisible=false"
        >关闭</el-button>

      </div>
    </el-dialog>
  </div>
  
</template>
<script>
import {
  getPlanTaskData
} from '@/api/setting'
import clipboard from '@/utils/clipboard'
export default {
  created() {
    this.getPlanTaskDatabtn()
  },
  data() {
    return {
      loading: false,
      dialogVisible:false,
      fiststyle: '',
      url: '',
      journal: '',
      abnormaldata: [],
      abdata:'',
      time:'',
      content:'',
      zt:[],
    }
  },
  computed: {
    getPath() {
      return function (path) {
        return (path.includes('https://') || path.includes('http://')) ? `${path}` : require(`@/assets/custorm_style/${path}`)
      }
    }
  },
  methods: {
    getPlanTaskDatabtn() {
      this.loading = true
      getPlanTaskData().then(res => {
        if (res.data.code == 1) {
          this.fiststyle = res.data.data[0]
          this.url = res.data.data[1]
          this.journal = res.data.data[2]
          this.zt = res.data.data[3]

          // this.abnormaldata = res.data.data[3]
          for(let a in res.data.data[3]){
             this.time=a
          }
          let b= Object.values(res.data.data[3])
          b.map(item=>{
            this.content=item
          })
          this.abnormaldata.push({time:this.time,content:this.content})
          console.log("212222222",this.abnormaldata)
          this.loading = false
        }
      })
    },
    handleClipboard(text, event) {
      clipboard(text, event)
    },
    abnormalbtn() {
        this.dialogVisible = true
    }
  }
}
</script>
<style lang="scss" scoped>
     /deep/.el-message-box__wrapper .msgBox{
        width: 50%;
    }
</style>